<template>
	<view class="box">
		<!-- 收藏 -->
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<view class="item" :style="paddingR">
				<image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
				经纪人管理
				<!-- <image class="image2" src="https://pic.bangbangtongcheng.com/static/xiaoxi.png" mode="widthFix" /> -->
				<view class="bianji" @click="bianji">{{ text }}</view>
			</view>
		</view>
		<scroll-view scroll-y :style="'height:calc( 100vh - ' + statusBarHeight + 'px )'">
			<view>
				<view @click="details(item)" class="mingpian"
					v-for="(item, index) in jjrList" :key="item.id" :style="'margin-left: ' +(396 - width) +'rpx;width: ' +(width + 324) +'rpx'">
					<checkbox v-if="width == 290" style="top: 70rpx; left: -80rpx; position: relative"
						:checked="item.active" :data-index="index" @click.stop="changeRadio"></checkbox>
					<view class="name">{{ item.nikeName ||"未命名用户" }}</view>
					<image class="img1" :src="item.userImage ||'https://pic.bangbangtongcheng.com/static/my/header.png'" />
					<view class="img2">经纪人</view>
					<view class="xin" v-if="item.scoreAvg">
						<image class="img3" v-for="item1 in Number(item.scoreAvg)" :key="item1+100"
							src="https://pic.bangbangtongcheng.com/static/xin_liang.png" />
						<image class="img3" v-for="item1 in 5 - item.scoreAvg" :key="item1+10"
							src="https://pic.bangbangtongcheng.com/static/xin_hui.png" />
					</view>
					<view class="dai" v-if="item.status == 0">待审核</view>
					<view class="dai" v-if="item.status == 2">待平台审核</view>
					<view class="li" style="background-color: red!important;color: white;" v-if="item.status == 3">已拒绝</view>
					<view class="li" v-if="item.confirmDuty == 2">离职</view>
					<view class="dai" v-if="item.confirmDuty == 1">离职待确认</view>
					<view class="zhi" v-if="item.dutyStatus == 1 && item.status == 1 && item.confirmDuty == 0">在职</view>
				</view>
				<view v-if="jjrList.length == 0" class="none">
					<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
					<view>没有更多数据了</view>
				</view>
			</view>
		</scroll-view>
		<view class="bot" v-if="width == 290">
			<view class="bot_4" v-if="(activeData.dutyStatus == 2 || activeData.status == 3)&&!isShowCC" @click="delJJR">删除</view>
			<view class="bot_4" @click="mark" v-if="!isShowCC&&activeData.status == 1&&activeData.confirmDuty==0">标记为离职</view>
			<view class="bot_4" @click="openPOPUP(true)" v-if="toShow">审核</view>
		</view>
		<view class="zbc" v-if="zbc" style="z-index: 11;">
			<view class="shangjia" v-if="shangjia">
				<view class="li_1">确定要将当前人员标记为离职？</view>
				<view class="li_2" @click="guan">取消</view>
				<view class="li_3" @click="lizhi">确定</view>
			</view>
		</view>
		<view class="audit"
			style="width: 100%;height: 100%;position: fixed;background-color: rgba(19, 18, 18, 0.5);z-index: 100;top: 0;"
			@click.self="isShowCCPOPUP=false" v-if="isShowCCPOPUP">
			<view class="fabuZbc">
				<view class="popup_title">认证审核</view>
				<view class="content">{{content}}</view>
				<view class="jjyy">拒绝原因:</view>
				<textarea type="text" :value="textContent" maxlength="-1" @input="textInput"
					placeholder="拒绝时请输入拒绝原因"></textarea>
				<view class="auditBut">
					<view class="but1" @click="submitFeedback(2)">拒绝</view>
					<view class="but" @click="submitFeedback(1)">通过</view>
				</view>
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = 106;
	//  #endif
	export default {
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
			isAllChecked() {
				var arr = this.jjrList.filter((item) => {
					return item.active
				})
				return arr.length && arr.length == this.jjrList.length
			},
			toShow() {
				var arr = this.jjrList.filter((item) => {
					return item.active
				})
				if (arr.length == 1 && arr[0].status == '0') {
					return true
				} else {
					return false
				}
			}
		},
		data() {
			const pr = this.$menuBtnInfo.pr ? `padding-right: ${this.$menuBtnInfo.pr + 5}px` : '';
			return {
				paddingR: pr,
				// 显示确认和取消
				isShowCC: false,
				isShowCCPOPUP: false,
				isCorC: false,
				isOperating: false,
				textContent: '',
				content: '',

				statusBarHeight,
				width: 366,
				text: "管理",
				TabCur: 0,
				zbc: false,
				shouye: false,
				shangjia: false,
				list: [{
						num: 1,
						name: "房源"
					},
					{
						num: 2,
						name: "店铺"
					},
					{
						num: 3,
						name: "经纪人"
					},
					{
						num: 4,
						name: "看点"
					}
				],
				checked: false,
				scrollLeft: 0,
				userInfo: uni.getStorageSync("Pduser"),
				imgUrl: this.$imgSrc,
				picker: [],
				jjrList: [],
				activeData: {}
			};
		},
		onLoad() {
			for (let i = 1; i < 11; i++) {
				this.picker.push(i + "天");
			}
			this.getjjrList();
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		methods: {
			textInput(e) {
				this.textContent = e.detail.value;
			},
			openPOPUP(flag) {
				let arr = this.jjrList.filter(el => {
					return el.active;
				});
				if (!arr.length) {
					uni.showToast({
						title: "请选择经纪人",
						icon: "none",
						mask: true
					});
					return;
				}
				this.isCorC = flag
				this.isShowCCPOPUP = true
			},
			async confuse() {
				this.isShowCCPOPUP = false
			},
			submitFeedback(type) {

				var data = {
					userId: this.activeData.userId,
					shopId: this.activeData.shopId,
					shopName: this.activeData.shopName,
				}
				if (type == 2) { //拒绝
					if(!this.textContent){
						uni.showToast({
							title: "请填写拒绝原因",
							icon: "none",
							mask: true
						});
						return
					}
					data.remark = this.textContent;
					data.examineStatus = 2;
				}
				if (type == 1) { //同意
					delete data.remark;
					data.examineStatus = 1;
				}
				console.log(this.auditData);
				console.log('this.auditData', this.auditData)
				// mob/user/merchant
				this.$myRequest.post("/mob/user/merchant", data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: "success",
						});

						this.textContent = "";

						this.getjjrList()
					}
				});
				this.isShowCCPOPUP = false
			},
			details(item) {
				if (!this.showLogin()) {
					return;
				}
				if(item.dutyStatus == 2){
					uni.showToast({
						title: "该经纪人已离职，无法查看！",
						icon: "none",
						mask: true
					});
					return
				}
				if(item.status == 3){
					uni.showToast({
						title: "该经纪人已拒绝，无法查看！",
						icon: "none",
						mask: true
					});
					return
				}
				if(item.status == 0){
					this.activeData = item
					this.isShowCCPOPUP = true
					return
				}
				uni.navigateTo({
					url: "/pages_owner/dealer/goldConsultant?id=" + item.id + "&userId=" + item.userId
				});
			},
			bianji() {
				if (this.text == "管理") {
					this.text = "完成";
					this.width = 290;
				} else {
					this.text = "管理";
					this.width = 366;
				}
			},
			guan() {
				this.zbc = false;
				this.shangjia = false;
			},
			allChecked() {
				this.checked = !this.checked;
				if (this.checked) {
					this.jjrList.forEach(el => {
						el.active = true;
					});
				} else {
					this.jjrList.forEach(el => {
						el.active = false;
					});
				}
			},
			mark() {
				let arr = this.jjrList.filter(el => {
					return el.active;
				});
				if (!arr.length) {
					uni.showToast({
						title: "请选择经纪人",
						icon: "none",
						mask: true
					});
					return;
				}
				if (this.userInfo.id==arr[0].userId) {
					uni.showToast({
						title: "商家不能标记自己为离职",
						icon: "none",
						mask: true
					});
					return;
				}
				this.zbc = true;
				this.shangjia = true;
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},

			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			changeRadio(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				console.log('index', index)
				that.jjrList.forEach((el, index1) => {
					if (index == index1) {
						// 以前的
						// that.jjrList[index].active = !that.jjrList[index].active;
						// that.activeData = that.jjrList[index];
						// 现在的
						that.jjrList[index].active = !that.jjrList[index].active;
						that.activeData = that.jjrList[index];
						console.log(that.activeData,'dssss')
					} else {
						el.active = false;
					}
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			async delJJR() {
				let arr = this.jjrList.filter(el => {
					return el.active;
				});
				if (!arr.length) {
					uni.showToast({
						title: "请选择经纪人",
						icon: "none",
						mask: true
					});
					return;
				}
				let ids = [];
				arr.forEach(el => {
					ids.push(el.id);
				});
				await this.$myRequest
					.post("/mob/user/delAgent", {
						id: String(ids)
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					});
				await this.getjjrList();
			},
			async lizhi() {
				let arr = [];
				this.jjrList.forEach(el => {
					if (el.active) {
						arr.push(el.id);
					}
				});
				await this.$myRequest
					.post("/mob/user/markResignation", {
						id: String(arr)
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						this.guan();
					});
				await this.getjjrList();
			},
			detailjjr(id) {
				if (!this.showLogin()) {
					return;
				}
				uni.navigateTo({
					url: "/pages_owner/dealer/goldConsultant?userId=" + id
				});
			},
			getjjrList() {
				let that = this;
				this.$myRequest
					.get("/mob/user/getAgentInfoList", {
						pageSize: "999",
						pageNo: "1",
						shopId: this.userInfo.shopId
					})
					.then(res => {
						res.page.list.forEach(el => {
							el.active = false;
							if (el.image) {
								let arr = el.image.split("");
								if (arr[0] == "/") {
									el.userImage = that.imgUrl + el.userImage;
								}
							}
						});
						// 状态 待审核 在职 离职  已拒绝
						this.jjrList = res.page.list;
					});
			}
		}
	};
</script>
<style lang="less" scoped>
	.fabuZbc {
		position: fixed;
		top: 20%;
		left: 10%;
		width: 300px;
		height: 235px;
		background-color: #f3efef;

		.popup_title {
			line-height: 40px;
			text-align: center;
			height: 40px;
			background-color: #64b6a8;
			color: #fff;
			font-size: 16px;
		}

		.content {
			margin-left: 10px;
			margin-right: 10px;
			text-align: left;
			margin-top: 10px;
			font-size: 16px;
		}

		.jjyy {
			margin-top: 10px;
			font-size: 16px;
			margin-left: 10px;
		}

		textarea {
			margin-top: 10px;
			color: rgb(97, 94, 94);
			margin-left: 10px;
			height: 50px;
			margin-right: 10px;
			width: 92%;
		}

		.auditBut {
			display: flex;
			justify-content: center;

			.but {
				width: 200rpx;
				height: 80rpx;
				background: #64b6a8;
				border-radius: 50rpx;
				font-size: 34rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				margin-top: 24rpx;
				margin-left: 40rpx;
			}

			.but1 {
				width: 200rpx;
				height: 80rpx;
				background: #7c7c7c;
				border-radius: 50rpx;
				font-size: 34rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				margin-top: 24rpx;
			}
		}
	}

	.zbc {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);

		.tan {
			position: absolute;
			width: 600rpx;
			height: 420rpx;
			background-color: #fff;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 10rpx;
			overflow: hidden;

			.li_1 {
				margin-left: 32rpx;
				margin-top: 60rpx;
				font-weight: 600;
				font-size: 30rpx;
			}

			.li_2 {
				font-size: 30rpx;
				margin-left: 32rpx;
				margin-top: 30rpx;

				view {
					display: inline-block;
					font-weight: 600;
					font-size: 30rpx;
				}

				.xuan {
					position: relative;
					width: 160rpx;
					height: 60rpx;
					background: #ffffff;
					border: 2rpx solid #64b6a8;
					border-radius: 37rpx;
					line-height: 60rpx;
					color: #64b6a8;
					text-indent: 16rpx;
				}

				.xuan::before {
					position: absolute;
					top: 20rpx;
					right: 30rpx;
					content: "";
					border-color: #fff #fff #64b6a8 #fff;
					border-style: solid;
					border-width: 0rpx 8rpx 14rpx 8rpx;
					height: 0;
					width: 0;
				}
			}

			.li_3 {
				width: 536rpx;
				font-size: 24rpx;
				margin-left: 32rpx;
				color: #ea4b4b;
				margin-top: 40rpx;
			}

			.li_4 {
				position: absolute;
				font-size: 30rpx;
				width: 300rpx;
				height: 90rpx;
				background: #f2f2f2;
				bottom: 0;
				left: 0;
				text-align: center;
				line-height: 90rpx;
			}

			.li_5 {
				position: absolute;
				font-size: 30rpx;
				width: 300rpx;
				height: 90rpx;
				background: #64b6a8;
				bottom: 0;
				right: 0;
				text-align: center;
				line-height: 90rpx;
				color: #fff;
			}
		}

		.shangjia {
			position: absolute;
			width: 600rpx;
			height: 300rpx;
			background-color: #fff;
			border-radius: 10rpx;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);

			.li_1 {
				width: 100%;
				font-size: 34rpx;
				font-weight: 600;
				margin-top: 80rpx;
				text-align: center;
			}

			.li_2 {
				display: inline-block;
				vertical-align: top;
				width: 160rpx;
				height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #64b6a8;
				border-radius: 37rpx;
				text-align: center;
				line-height: 60rpx;
				color: #64b6a8;
				margin-top: 58rpx;
				margin-left: 118rpx;
			}

			.li_3 {
				display: inline-block;
				vertical-align: top;
				width: 160rpx;
				height: 60rpx;
				background: #64b6a8;
				border-radius: 37rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				margin-top: 58rpx;
				margin-left: 46rpx;
			}
		}
	}

	.box {
		width: 100%;
		padding-bottom: 130rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0 20rpx;
			.image1 {
			width: 32rpx;
			height: 32rpx;
			}
		}
	}

	.bot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		z-index: 9;

		view {
			display: inline-block;
			position: absolute;
		}

		.bot_1 {
			left: 42rpx;
			top: 38rpx;
		}

		.bot_3 {
			width: 200rpx;
			height: 70rpx;
			background: #ffffff;
			border: 2rpx solid #64b6a8;
			color: #64b6a8;
			line-height: 68rpx;
			left: 304rpx;
			top: 25rpx;
			text-align: center;
			border-radius: 36rpx;
		}

		.bot_4 {
			width: 190rpx;
			height: 70rpx;
			background: #64b6a8;
			color: #ffffff;
			line-height: 68rpx;
			left: 520rpx;
			top: 25rpx;
			text-align: center;
			border-radius: 36rpx;
		}
	}

	.mingpian {
		position: relative;
		width: 690rpx;
		height: 200rpx;
		background: #ffffff;
		box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
		border-radius: 18rpx;
		margin-top: 40rpx;
		margin-left: 30rpx;

		.name {
			position: absolute;
			top: 50rpx;
			left: 174rpx;
			width: 300rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1; //想要的行数
			-webkit-box-orient: vertical;
			font-size: 36rpx;
		}

		.img1 {
			position: absolute;
			top: 44rpx;
			left: 30rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.img2 {
			position: absolute;
			top: 132rpx;
			left: 40rpx;
			width: 100rpx;
			height: 36rpx;
			background: url("https://pic.bangbangtongcheng.com/static/name.png");
			background-size: 100% 100%;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 36rpx;
		}

		.zhiwei {
			position: absolute;
			top: 132rpx;
			left: 54rpx;
			font-size: 20rpx;
			color: #fff;
		}

		.xin {
			position: absolute;
			top: 112rpx;
			left: 170rpx;

			.img3 {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.img4 {
			position: absolute;
			width: 54rpx;
			height: 54rpx;
			top: 50rpx;
			left: 300rpx;
		}

		.img5 {
			position: absolute;
			width: 54rpx;
			height: 54rpx;
			top: 50rpx;
			left: 360rpx;
		}

		.li {
			position: absolute;
			top: 0;
			right: 0;
			width: 130rpx;
			height: 60rpx;
			background: #666666;
			border-radius: 0 18rpx 0 18rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
		}

		.dai {
			position: absolute;
			top: 0;
			right: 0;
			width: 160rpx;
			height: 60rpx;
			background: #cf9236;
			border-radius: 0 18rpx 0 18rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
		}

		.zhi {
			position: absolute;
			top: 0;
			right: 0;
			width: 130rpx;
			height: 60rpx;
			background: #64b6a8;
			border-radius: 0 18rpx 0 18rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
		}
	}

	/deep/uni-checkbox .uni-checkbox-input {
		background-color: rgba(0, 0, 0, 0);
		border: 2rpx solid #999;
	}

	/deep/uni-checkbox .wx-checkbox-input,
	/deep/uni-checkbox .uni-checkbox-input {
		width: 48rpx;
		height: 48rpx;
	}

	/deep/.uni-checkbox-input-checked {
		background-color: #64b6a8 !important;
		border: 2rpx solid #64b6a8 !important;
	}

	/deep/ uni-checkbox::before {
		font-size: 40rpx;
		margin-top: -14rpx;
		right: 6rpx !important;
	}

	.none {
		text-align: center;

		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}

		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
</style>